Material কম্পোনেন্টস (Buttons, Icons, Cards ইত্যাদি)

Angular Material হল Angular অ্যাপ্লিকেশনের জন্য একটি জনপ্রিয় UI কম্পোনেন্ট লাইব্রেরি যা Google এর Material Design প্রিন্সিপাল অনুসরণ করে তৈরি। এটি ব্যবহারকারীদের বিভিন্ন ধরনের UI কম্পোনেন্ট সরবরাহ করে, যেমন Buttons, Icons, Cards, Input Fields, Dialogs ইত্যাদি, যা UI ডিজাইনকে দ্রুত এবং সহজে তৈরি করতে সাহায্য করে। এই কম্পোনেন্টগুলির মাধ্যমে অ্যাপ্লিকেশনের ইন্টারফেস আরও সুন্দর এবং কার্যকরী হয়।

এখানে আমরা কিছু জনপ্রিয় Angular Material কম্পোনেন্ট যেমন Buttons, Icons, এবং Cards সম্পর্কে আলোচনা করব এবং কিভাবে এগুলো ব্যবহার করা যায় তা দেখাব।

১. Material Button

Material Button একটি প্রধান কম্পোনেন্ট যা যেকোনো অ্যাপ্লিকেশনে বাটন তৈরি করতে ব্যবহৃত হয়। Angular Material এ বাটন তৈরি করার জন্য আপনাকে MatButtonModule ইমপোর্ট করতে হবে।

বাটন ইমপ্লিমেন্টেশন:

1. মডিউলে বাটন ইমপোর্ট করা:

   app.module.ts ফাইলে MatButtonModule ইমপোর্ট করুন:

   import { MatButtonModule } from '@angular/material/button';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatButtonModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ বাটন ব্যবহার করা:

   <button mat-button>Default Button</button>
   <button mat-raised-button color="primary">Primary Button</button>
   <button mat-stroked-button color="accent">Accent Button</button>
   <button mat-flat-button color="warn">Warn Button</button>
   

   এখানে:

   • mat-button: সাধারণ বাটন তৈরি করে।
   • mat-raised-button: উঁচু (raised) বাটন তৈরি করে।
   • mat-stroked-button: স্ট্রোকড বাটন তৈরি করে, যার সীমানা থাকে।
   • mat-flat-button: ফ্ল্যাট বাটন তৈরি করে।

২. Material Icon

Angular Material Icons হল একটি স্টাইলিশ এবং কার্যকরী উপায় আইকন ব্যবহার করার জন্য। আপনি এখানে Google Material Icons ব্যবহার করতে পারেন।

আইকন ইমপ্লিমেন্টেশন:

1. মডিউলে আইকন ইমপোর্ট করা:

   app.module.ts ফাইলে MatIconModule ইমপোর্ট করুন:

   import { MatIconModule } from '@angular/material/icon';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatIconModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ আইকন ব্যবহার করা:

   <mat-icon>home</mat-icon>
   <mat-icon>favorite</mat-icon>
   <mat-icon>search</mat-icon>
   

   এখানে, mat-icon ট্যাগের মধ্যে আপনি যে আইকনের নাম লিখবেন তা Google Material Icons থেকে স্বয়ংক্রিয়ভাবে রেন্ডার হবে। আপনার Angular অ্যাপ্লিকেশনকে প্রয়োজনীয় আইকনগুলো দেখতে Google Material Icons থেকে সিলেক্ট করতে পারেন।

৩. Material Card

Material Card হল একটি ফ্লেক্সিবল এবং সহজে কাস্টমাইজেবল উপাদান যা আপনি বিভিন্ন ধরণের কনটেন্ট প্রদর্শন করতে ব্যবহার করতে পারেন, যেমন টেক্সট, ছবি, বাটন ইত্যাদি।

কার্ড ইমপ্লিমেন্টেশন:

1. মডিউলে কার্ড ইমপোর্ট করা:

   app.module.ts ফাইলে MatCardModule ইমপোর্ট করুন:

   import { MatCardModule } from '@angular/material/card';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatCardModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ কার্ড ব্যবহার করা:

   <mat-card>
     <mat-card-header>
       <mat-card-title>Card Title</mat-card-title>
       <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
     </mat-card-header>
     <img mat-card-image src="https://via.placeholder.com/150" alt="Card image">
     <mat-card-content>
       <p>This is an example of an Angular Material Card component.</p>
     </mat-card-content>
     <mat-card-actions>
       <button mat-button>Learn More</button>
     </mat-card-actions>
   </mat-card>
   

   এখানে:

   • mat-card: মূল কার্ড ট্যাগ।
   • mat-card-header: কার্ডের শিরোনাম এবং সাবটাইটেল।
   • mat-card-title এবং mat-card-subtitle: কার্ডের শিরোনাম এবং সাবটাইটেল।
   • mat-card-image: কার্ডে চিত্র যোগ করার জন্য।
   • mat-card-content: কার্ডের কন্টেন্ট।
   • mat-card-actions: কার্ডের অ্যাকশন বাটনগুলোর জন্য।

৪. Material Toolbar

Material Toolbar একটি পৃষ্ঠার টপ অংশে থাকা ন্যাভিগেশন বা অ্যাপ্লিকেশন হেডার তৈরি করতে ব্যবহৃত হয়। এটি টুলবারের মধ্যে বিভিন্ন উপাদান যেমন লোগো, ন্যাভিগেশন বাটন ইত্যাদি ধারণ করে।

টুলবার ইমপ্লিমেন্টেশন:

1. মডিউলে টুলবার ইমপোর্ট করা:

   app.module.ts ফাইলে MatToolbarModule ইমপোর্ট করুন:

   import { MatToolbarModule } from '@angular/material/toolbar';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatToolbarModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ টুলবার ব্যবহার করা:

   <mat-toolbar color="primary">
     <span>My Application</span>
   </mat-toolbar>
   

   এখানে:

   • mat-toolbar: টুলবার তৈরি করার জন্য ব্যবহৃত কম্পোনেন্ট।
   • color="primary": টুলবারের রঙ প্রাথমিক রঙ হিসেবে সেট করা হচ্ছে।

সারসংক্ষেপ

Angular Material আপনাকে দ্রুত এবং সুন্দরভাবে ইউজার ইন্টারফেস ডিজাইন করার জন্য অনেক ধরনের প্রস্তুত কম্পোনেন্ট সরবরাহ করে। এখানে আমরা Buttons, Icons, Cards এবং Toolbars এর উদাহরণ দেখলাম, তবে Angular Material আরও অনেক শক্তিশালী কম্পোনেন্ট যেমন Dialogs, Snackbars, Tables, Forms ইত্যাদি সরবরাহ করে। আপনি Angular Material এর অফিসিয়াল ডকুমেন্টেশন থেকে আরও কম্পোনেন্ট এবং তাদের কাস্টমাইজেশন সম্পর্কে বিস্তারিত জানতে পারেন।